<template>
  <div class="earnings-card">
    <div class="label">我的收益（元）</div>
    <div class="num">100</div>
    <div class="bottom flex align-center flex-between">
      <div class="tips">累计收益5000元</div>
      <div class="more flex align-center" @click="handPayouts">
        <span>去提现</span>
        <i class="esayIcon esayIcon-youjiantou"></i>
      </div>
    </div>
    <realname-auth ref="authRef" />
  </div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
import { defineAsyncComponent, ref } from 'vue'
import { useMessage } from 'naive-ui'
import { useAppsStore } from '@/stores/modules/app'
import { storeToRefs } from 'pinia'
import loginApi from '@/service/api/login'
const RealnameAuth = defineAsyncComponent(
  () => import('@/components/RealnameAuth.vue')
)
const toast = useMessage()
const useStore = useAppsStore()
const { getUserInfo: userInfo } = storeToRefs(useStore)

type PropsState = {
  balance: number
  totalEarnings: number
}
withDefaults(defineProps<PropsState>(), {
  balance: 0,
  totalEarnings: 0
})
const router: any = useRouter()
const handPayouts = async () => {
  if (!userInfo.value.isCertification) {
    const { data } = await loginApi.getAuth()
    if (data) {
      if (data.auditStatus === 'AUDIT') {
        toast.warning('实名认证审核中，请耐心等待')
        return
      } else if (data.auditStatus === 'REJECT') {
        toast.error(data.rejectCause)
        authRef.value.open(data)
        return
      }
    }
    authRef.value.open()
    return
  }
  router.push('/my/payouts')
}
const authRef = ref()
</script>

<style scoped lang="scss">
.earnings-card {
  flex: 1;
  background: #ffffff;
  border-radius: 12px;
  opacity: 1;
  border: 1px solid #eeeeee;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 0;
  .label {
    font-size: 14px;
    font-weight: 400;
    color: #999999;
  }
  .num {
    margin-top: 20px;
    font-size: 30px;
    font-family: HONOR Sans, HONOR Sans;
    font-weight: 600;
    color: #333333;
  }
  .bottom {
    margin-top: 38px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 27px;
    .tips {
      font-size: 14px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #666666;
    }
    .more {
      font-size: 14px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #f1423d;
      cursor: pointer;
      i {
        margin-left: 2px;
        font-size: 14px;
      }
    }
  }
}
</style>
